<template>
  <view>
    <l-form-cell v-if="show" label="车型" must has-slot :border-radius="audit ? '14rpx 14rpx 0 0' : '0'">
      <tui-dropdown-list
        shadow
        :transition="false"
        :height="530"
        :top="66"
        :show="!!(showCarModel && carTypeList.length) && !disabled"
        background-color="#fff"
        class="flex-item"
      >
        <input
          slot="selectionbox"
          v-model="form.brand"
          style="height:66rpx;"
          type="text"
          :disabled="disabled"
          class="text-30 color-t1 text-right"
          placeholder="请输入车辆品牌"
          placeholder-class="color-t3"
          @click.stop="showCarModel = true"
        >
        <template slot="dropdownbox">
          <scroll-view style="max-height: 530rpx;" scroll-y>
            <view
              v-for="(val,key) in carTypeList"
              :key="key"
              class="padding-lr-20 item"
              hover-class="hover"
              :hover-stay-time="70"
              @click="chooseCarModel(val)"
            >
              <view class="list-item flex-row align-center" :class="{'no-border':key === noBorder}">
                <text class="text-30 color-t1">{{ val.brand }}</text>
              </view>
            </view>
          </scroll-view>
        </template>
      </tui-dropdown-list>
    </l-form-cell>

    <l-form-cell v-if="show" v-model="form.seatAmount" label="核定载人数" placeholder="请输入核定载人数" type="number" :maxlength="2" must :disabled="status == 1 || status == 2 || disabled" />

    <l-form-cell v-if="show" v-model="form.number" label="车牌号" placeholder="请输入车牌号" must :unlined="audit" :border-radius="audit ? '0 0 14rpx 14rpx' : '0'" :disabled="status == 1 || status == 2 || disabled" />

    <template v-if="!audit">
      <l-form-cell label="关联司机" placeholder="请选择司机" :value="driverName" disabled :arrow="!disabled" @click="chooseDriver" />

      <l-form-cell label="部署城市" has-slot :arrow="!disabled" unlined border-radius="0 0 14rpx 14rpx">
        <l-city-picker :show-type="showType" :disabled="disabled" class="flex-item" :value="form.bizScopeId?form.bizScopeId[0]:[]" @change="form.bizScopeId = [$event]" />
      </l-form-cell>
    </template>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAdminVehicleTypePage } from '../../api'
export default {
  name: 'BasicInfoModel',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    carId: {
      type: String,
      default: ''
    },
    status: {
      type: [Number, String],
      default: 0
    },
    audit: {
      type: Boolean,
      default: false
    },
    driverName: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    typeId: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      carTypeList: [],
      carTypeIndex: null,
      showCarModel: false,
      form: {
        number: '',
        driverId: '',
        bizScopeId: [],
        typeId: '',
        brand: '',
        seatAmount: ''
      }
    }
  },
  computed: {
    brand() {
      if (this.carTypeList.length && this.carTypeIndex != null) return this.carTypeList[this.carTypeIndex].brand
      else return ''
    },
    noBorder() {
      return this.carTypeList.length - 1
    },
    ...mapGetters({
      userId: 'userId'
    })
  },
  watch: {
    data: {
      handler(e) {
        Object.assign(this.form, e)
      },
      deep: true
    },
    form: {
      handler() {
        this.$emit('update', this.form)
      },
      deep: true
    },
    typeId() {
      for (let i = 0; i < this.carTypeList.length; i++) {
        if (this.carTypeList[i].id === this.typeId) {
          this.carTypeIndex = i
        }
      }
    }
  },
  created() {
    this.carType()
  },
  methods: {
    // 获取车型列表
    async carType() {
      const [err, res] = await getAdminVehicleTypePage({ current: 1, size: 9999 })
      if (!this.$http.errorCheck(err, res)) return false
      let carTypeList = res.data.data.records
      if (!carTypeList) carTypeList = []
      this.carTypeList = carTypeList
    },
    // 修改车型
    changeCarType(e) {
      const val = e.detail.value
      this.carTypeIndex = val
      this.form.typeId = this.carTypeList[val].id
    },
    // 选择车型
    chooseCarModel(val) {
      this.form.brand = val.brand
    },
    // 选择司机
    chooseDriver() {
      if (this.disabled) return
      this.jump(`/driver/list/index?type=vehicle&driverId=${this.form.driverId}`)
    }
  }
}
</script>

<style scoped lang="scss">
.list-item{
  border-bottom:2rpx solid $color-border;
  height:106rpx;
}
.no-border{
  border:none;
}
</style>
